
<template>
     <el-input ref="myTextArea" type="textarea"  v-model="currentValue" placeholder="" :disabled="disableds2" :required="isRequired" :id="id" class='myInput' :style="styles" clearable size="small"  suffix-icon="el-icon-edit">
     </el-input>
    
</template>
 
<script>

    import filterXSS from "xss"
    export default {
        props:['id','value','styles','disableds','data','isreadonly','index','isRequired','fontSize'],
        name: "input-textarea",
        data(){
            return {
                currentValue:this.value,
                disableds2:this.disableds,
                pId:"",
                cId:"",
                first:'Y',
                currentValueOld:'',
                xssOption:{
                    stripIgnoreTagBody:true
                },
            }
        },
        created(){
            if(this.isreadonly=="Y")
                this.disableds2=true;
            this.setData();
            
            
        },
        mounted(){
            
            try{
                this.$refs.myTextArea.$parent.$parent.$children[0].$el.style.fontSize=this.fontSize
            }catch(e){}
        },
        methods:{
            setData(){
                if(!this.value){
                    if(this.data){
                        let ids=this.id.split(".");
                        if(ids.length>1){
                            let p=ids[0];
                            let id_=ids[1];
                            this.pId=p;
                            this.cId=id_;
                            if(this.index||this.index=='0'){
                                try{
                                    this.currentValue=unescape(this.data[p][this.index][id_]);
                                }catch(e){}
                            }else{
                                try{
                                    this.currentValue=unescape(this.data[p][id_]);
                                }catch(e){}
                            }
                            
                        }else{
                            if(this.data[this.id])
                                this.currentValue= unescape(this.data[this.id]);
                        }
                    
                    }
                }else{
                    
                    let data={};
                    data.id=this.id;
                    data.val=this.value;
                    data.index=this.index;
                    this.$emit('input',JSON.stringify(data));
                }
               
            }
        },
        watch:{
            currentValue: function (val) { //currentValue值变动就向父组件传值
                if(!val){
                    val="";
                }
                this.currentValue=filterXSS(this.currentValue,this.xssOption);
                this.currentValue=this.currentValue.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/%3C/g,"&lt;").replace(/%3E/g,"&gt;")
                if(this.first=='Y'){
                    this.currentValueOld=this.currentValue;
                    this.first='N';
                }
                if(this.currentValueOld!=this.currentValue){
                  //  alert(this.currentValue+"=="+this.currentValueOld)
                    this.GLOBAL.isChange=true;
                    let data={};
                    data.id=this.id;
                    data.val=val;
                    data.index=this.index;
                  //  val=escape(val);
                    console.log("textarea============"+val)
                    if(this.pId){
                        if(this.index!=""&&(this.index==0||this.index>0)){
                            let data_=this.data[this.pId][this.index];
                            data_[this.cId]=val;
                            this.$set(this.data[this.pId],this.index,data_)
                        }else{
                            this.$set(this.data[this.pId],this.cId,val)
                        }
                            
                    }else{
                        this.$set(this.data,this.id,val)
                    }
                    this.currentValueOld=this.currentValue;
                }
                

                //this.$emit('input',JSON.stringify(data));
                //this.$emit('on-change',JSON.stringify(data));
            },
            value:function (val) { //对值进行验证0
                
            },
            data:{
                handler: function (newVal) {
                   // this.setData()
                },      
                deep: true    //深度监听
            }
        }
    }
</script>
<style scoped>
    .el-input__inner{
        height:25px;
    }
    input{
        height:25px;
    }
   
</style>
<style >
 textarea{
        height:100%;
    }
</style>